<template>
    <div>
        <div style="width: 500px; height: 500px;" class="ref" ref="chartRef"></div>
    </div>
</template>

<script setup lang="ts">
import { shallowRef, onMounted } from "vue";
import * as echarts from "echarts";
import type { ECharts, EChartsCoreOption } from "echarts/types/dist/echarts";

const chartRef = shallowRef<HTMLElement | null>(null);
const chart = shallowRef<ECharts | null>();

const renderChart = ()=> {
    const option: EChartsCoreOption = {
        title: {
            show: false,
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            type: 'value',
            splitLine: {
                show: false
            },
            max: function (value: any) {
                console.log(value);
                return parseInt(value.max * 1.2)
            }
            // max: 100
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ],
    };
    chart.value!.setOption(option);
}

onMounted(()=> {
    chart.value = echarts.init(chartRef.value);
    renderChart();
});
</script>

<style scoped>

</style>